import Vue from 'vue'
import Vuex from 'vuex'

import mutations from './mutations'
import actions from './actions'
import getters from './getters'
import moduleA from './modules/moduleA'

// 1. 安装插件
Vue.use(Vuex)

// 2. 创建对象
const state = {
    count: 1000,
    students: [
        { id: 110, name: 'why', age: 18 },
        { id: 111, name: 'kobe', age: 21 },
        { id: 112, name: 'licy', age: 25 },
        { id: 113, name: 'lilei', age: 30 },
    ],
    info: {
        name: '小刘',
        age: 21,
        height: 1.98,
    },
}

const store = new Vuex.Store({ // 单一状态树（只创建一个store对象）
    state, // 保存共享状态
    mutations, // 修改state状态的一些操作，devtools会跟踪（如果是同步操作可以跳过actions，异步操作的胡devtools会跟踪不到）
    actions, // 用户的一些操作（修改state状态时，有异步操作时，需要通过actions）
    getters, // 类似组件的计算属性computed（变量经过变化之后在界面使用，就可以使用getters）
    modules: { // 划分的一些模块
        a: moduleA,
    },
})

// 3. 导出store对象
export default store